<template>
      <div class="article_details_backlinks_box outer_shadows">
          <ul>
              <li v-for="(item,index) in backlinks" :key="index"  @mouseover="choose=index" @mouseout="choose=-1">
                  <img :src="item.img " alt="" @click="thirdPartyApps" :title="item.msg">
                   <Bubbling v-show="index===choose">
                       <img :src="item.url" alt="" style="width: 80px">
                   </Bubbling>
              </li>
          </ul>
      </div>
</template>


<!--文章底部外链-->
<script setup>
import store from "@/store/index.js";
import {ref} from "vue";
import Bubbling from "@/components/publicComponent/Bubbling.vue";

//显示的是哪一个外链
const choose = ref(-1);

//外链数据
const backlinks = ref([
    {msg:"分享给QQ好友",img:"/public/img/detail/qq.png",url:"/public/img/ewm.png"},
    {msg:"分享到微信",img:"/public/img/detail/weixin.png",url:"/public/img/ewm.png"},
    {msg:"分享到QQ空间",img:"/public/img/detail/space.png",url:"/public/img/ewm.png"}
]);

const thirdPartyApps = ()=>{
    store.commit('info_sub',{msg:"扫码即可分享！",type:'normal'});
}

</script>

<style scoped>
.article_details_backlinks_box{
    text-align: center;
    width: 100%;
    padding: 0 20px 20px;

}
ul{
    list-style: none;
    display: flex;
    justify-content: center;
}
li{
    position: relative;
    margin: 0 10px;
    cursor: pointer;
}
li img{
    width: 23px;
}
</style>